<template>
	<div class="kouJibm">
		<!-- {{ message?.implementationList.length }} -->
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="应用开发前期" name="1">
				<kouJi v-if="message" :message="message" />
				<div v-else class="no_cont">请填写实施前端信息</div>
			</el-tab-pane>
			<el-tab-pane label="应用开发中期" name="2">
				<div class="top_box" v-if="message?.alignedWithThreeLevelCenter == 0 || message?.alignedWithThreeLevelCenter == 1">
					<div class="top_item">
						<div class="longRever">
							<div class="item_box_w">
								<span class="item_name">是否对接三级治理中心</span>:
								<div>{{ dictionary?.isYN(message?.alignedWithThreeLevelCenter) }}</div>
							</div>
							<div class="item_box_w" v-if="message?.alignedWithThreeLevelCenter == 1">
								<span class="item_name">上传对接材料</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.uploadInterfacingMaterials" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">应用部署文档</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.applicationDeploymentDocument" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">应用源码</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.applicationSourceCode" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">数据库设计文档</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.databaseDesignDocument" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">接口文档</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.interfaceDocument" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="no_cont">请填写实施中期信息</div>
			</el-tab-pane>
			<el-tab-pane label="应用开发后期" name="3">
				<div class="top_box" v-if="message?.majorFaultReportAfter == 0 || message?.majorFaultReportAfter == 1">
					<div class="top_item">
						<div class="longRever">
							<div class="item_box">
								<span class="item_name">测试用例</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.testCases" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">测试计划</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.testPlan" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">测试报告</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.testReport" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">联调记录</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.jointDebuggingRecord" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">试运行报告</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.trialOperationReport" />
								</div>
							</div>
							<div class="item_box">
								<span class="item_name">数字资源编目信息表</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.dataResourceCatalogInfo" />
								</div>
							</div>
							<div class="item_box_w">
								<span class="item_name">是否产生重大故障</span>:
								<div>{{ dictionary.isYN(message?.majorFaultReportAfter) }}</div>
							</div>
							<div class="item_box" v-if="message?.majorFaultReportAfter == 1">
								<span class="item_name">重大故障情况报告</span>:
								<div>
									<FilePreview :type="'view'" v-model="message.majorFailureReport" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="no_cont">请填写实施后期信息</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import textImg from '/@/views/digitalList/detail/components/component/textImg.vue';
import FilePreview from '/@/components/HyUpload/index.vue';
import dictionary from './dictionary.js';
import kouJi from './kouJi.vue';
import { toRefs, defineProps, ref } from 'vue';
const props = defineProps({
	message: {
		type: Object,
	},
});

const activeName = ref('1');

const { message } = toRefs(props);
</script>

<style lang="scss" scoped>
.kouJibm {
	background-color: #ffffff;
	padding: 10px;
	.top_box {
		.top_item {
			.title_item {
				font-size: 15px;
				font-weight: 600;
				margin-bottom: 5px;
			}
			.longRever {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.item_box {
					width: 45%;
					margin: 5px 0px;
					display: flex;
					flex-wrap: wrap;

					.item_name {
						color: #999999;
						width: 60px;
					}
				}

				.item_box_w {
					width: 100%;
					margin: 5px 0px;
					display: flex;
					// flex-wrap: wrap;

					.item_name {
						color: #999999;
						width: 60px;
					}

					.table {
						flex: 1;
					}
				}
			}
		}
	}

	.data_ying {
		:deep(.el-card) {
			border: 0px;
		}

		:deep(.el-card:hover) {
			box-shadow: 0 0 0px 0px;
		}
		:deep(.el-card__header) {
			background-color: #ffffff;
		}
	}
}
</style>
